<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        .noramal {
            background-color: #ffffff;
        }

        .red {
            background-color: red;
        }



        ul li {
            float: left;
            list-style-type: none;
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <ul>
            <li :class="color1" @click.self="changeColor1">教父</li>
            <li :class="color2" @click="changeColor2">阿甘正传</li>
            <li :class="color3" @click="changeColor3">楚门的世界</li>
            <li :class="color4" @click="changeColor4">盗梦空间</li>
        </ul>
    </div>

    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                color1: 'normal',
                color2: 'normal',
                color3: 'normal',
                color4: 'normal',

            },
            methods: {
                changeColor1() {
                    this.color1 = 'red'
                },
                changeColor2() {
                    this.color2 = 'red'
                },
                changeColor3() {
                    this.color3 = 'red'
                },
                changeColor4() {
                    this.color4 = 'red'
                },
            },
            created() {
                this.changeColor1()
            },
        })
    </script>
</body>

</html>